<h3 class="mat-h3">Elevation</h3>

<p class="mat-body1">
    Elevation is the relative depth, or distance, between two surfaces along the z-axis.
</p>

<h5 class="mat-h5">Example</h5>

<style>
    .demo-mat-elevation-container div {
        width: 200px;
        height: 100px;
        float: left;
        margin: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: monospace;
    }
</style>

<DemoContainer Class="demo-mat-elevation-container">
    <Content>

        <div class="mat-elevation-z0">.mat-elevation-z0</div>
        <div class="mat-elevation-z1">.mat-elevation-z1</div>
        <div class="mat-elevation-z2">.mat-elevation-z2</div>
        <div class="mat-elevation-z3">.mat-elevation-z3</div>
        <div class="mat-elevation-z4">.mat-elevation-z4</div>
        <div class="mat-elevation-z5">.mat-elevation-z5</div>
        <div class="mat-elevation-z6">.mat-elevation-z6</div>
        <div class="mat-elevation-z7">.mat-elevation-z7</div>
        <div class="mat-elevation-z8">.mat-elevation-z8</div>
        <div class="mat-elevation-z9">.mat-elevation-z9</div>
        <div class="mat-elevation-z10">.mat-elevation-z10</div>
        <div class="mat-elevation-z11">.mat-elevation-z11</div>
        <div class="mat-elevation-z12">.mat-elevation-z12</div>
        <div class="mat-elevation-z13">.mat-elevation-z13</div>
        <div class="mat-elevation-z14">.mat-elevation-z14</div>
        <div class="mat-elevation-z15">.mat-elevation-z15</div>
        <div class="mat-elevation-z16">.mat-elevation-z16</div>
        <div class="mat-elevation-z17">.mat-elevation-z17</div>
        <div class="mat-elevation-z18">.mat-elevation-z18</div>
        <div class="mat-elevation-z19">.mat-elevation-z19</div>
        <div class="mat-elevation-z20">.mat-elevation-z20</div>
        <div class="mat-elevation-z21">.mat-elevation-z21</div>
        <div class="mat-elevation-z22">.mat-elevation-z22</div>
        <div class="mat-elevation-z23">.mat-elevation-z23</div>
        <div class="mat-elevation-z24">.mat-elevation-z24</div>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"

        <div class=""mat-elevation-z0"">.mat-elevation-z0</div>
        <div class=""mat-elevation-z1"">.mat-elevation-z1</div>
        <div class=""mat-elevation-z2"">.mat-elevation-z2</div>
        <div class=""mat-elevation-z3"">.mat-elevation-z3</div>
        <div class=""mat-elevation-z4"">.mat-elevation-z4</div>
        <div class=""mat-elevation-z5"">.mat-elevation-z5</div>
        <div class=""mat-elevation-z6"">.mat-elevation-z6</div>
        <div class=""mat-elevation-z7"">.mat-elevation-z7</div>
        <div class=""mat-elevation-z8"">.mat-elevation-z8</div>
        <div class=""mat-elevation-z9"">.mat-elevation-z9</div>
        <div class=""mat-elevation-z10"">.mat-elevation-z10</div>
        <div class=""mat-elevation-z11"">.mat-elevation-z11</div>
        <div class=""mat-elevation-z12"">.mat-elevation-z12</div>
        <div class=""mat-elevation-z13"">.mat-elevation-z13</div>
        <div class=""mat-elevation-z14"">.mat-elevation-z14</div>
        <div class=""mat-elevation-z15"">.mat-elevation-z15</div>
        <div class=""mat-elevation-z16"">.mat-elevation-z16</div>
        <div class=""mat-elevation-z17"">.mat-elevation-z17</div>
        <div class=""mat-elevation-z18"">.mat-elevation-z18</div>
        <div class=""mat-elevation-z19"">.mat-elevation-z19</div>
        <div class=""mat-elevation-z20"">.mat-elevation-z20</div>
        <div class=""mat-elevation-z21"">.mat-elevation-z21</div>
        <div class=""mat-elevation-z22"">.mat-elevation-z22</div>
        <div class=""mat-elevation-z23"">.mat-elevation-z23</div>
        <div class=""mat-elevation-z24"">.mat-elevation-z24</div>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>